<template>
  <div>
    <el-card class="box-card">
      <template v-slot:header>
        <div class="header">
          <span>我的购物车</span>
          <span class="comment">温馨提示：产品是否购买成功，以最终支付为准哦，请尽快完成结算</span>
        </div>
      </template>
      <div class="content">
        <el-table
          :data="items"
          ref="multipleTableRef"
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            width="55"
            fixed
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="图片" width="150">
            <template v-slot="scope">
              <img :src="scope.row.cover" style="width: 120px" />
            </template>
          </el-table-column>
          <el-table-column prop="title" label="商品名称" sortable></el-table-column>
          <el-table-column prop="price" label="单价" width="100" sortable></el-table-column>
          <el-table-column label="数量" width="170" sortable>
            <template v-slot="scope">
              <el-input-number
                size="small"
                :min="0"
                :max="10"
                v-model="scope.row.amount"
                @change="
                  (newValue, oldValue) => {
                    adjustAmount(scope.row, newValue, oldValue)
                  }
                "
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="小计" width="120" sortable>
            <template v-slot="scope">
              <span class="subtotal">{{ scope.row.price * scope.row.amount }} 元</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template v-slot="scope">
              <el-button plain size="small" type="danger" @click="removeItem(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="actions">
          {{ `购物车中共计  件商品，已选择其中 ${multipleSelection.length} 件` }}
          <div class="total">
            总计： <span class="pay_price">{{ total }}</span> 元
            <div class="pay_action">
              <el-button
                size="large"
                type="primary"
                style="position: relative; top: -6px"
                :disabled="total <= 0"
                @click="goSettlement"
                >￥ 选好了，去结算
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <PayStepIndicator :step="1" />
  </div>
</template>

<script setup>
import PayStepIndicator from '@/components/home/cart/PayStepIndicator.vue'
import { computed, onMounted, ref } from 'vue'
import { useCartStore } from '@/stores/cart.js'
import { useRouter } from 'vue-router'

const cartStore = useCartStore()
const router = useRouter()



const multipleSelection = ref([])
const multipleTableRef = ref()
const items = cartStore.state.items
/**
 * 商品总价
 **/
const total = computed(() => {
  return multipleSelection.value.reduce((sum, product) => sum + product.price * product.amount, 0)
})

onMounted(() => {
  // 转载时默认全选所有商品
  toggleSelection(cartStore.state.items)
})

/**
 * 调整购物车中产品的数量
 */
function adjustAmount(product, currentValue, oldValue) {
//   let item = { ...product }
//   cartStore.adjustCartItems(item)
}
/**
 * 删除购物车中的产品
 **/
function removeItem(id) {
  // 删除后，原本选中的项目要继续保持选中
  this.$nextTick(() => toggleSelection(cartStore.state.items))
}
/**
 * 选中购物车表格中指定商品
 */
function toggleSelection(rows) {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value.toggleRowSelection(
        row,
        undefined
      )
    })
  } else {
    multipleTableRef.value.clearSelection()
  }

}
/**
 *转到结算页面付款
 **/
function goSettlement() {
  cartStore.setupSettlementBillWithDefaultValue({
    items: multipleSelection,
  })
  router.push('/settle')
}
/**
 * 维护表格选择集
 */
function handleSelectionChange(val) {
  multipleSelection.value = val
}
</script>

<style scoped>
.subtotal {
  color: red;
  font-weight: bold;
  font-size: 16px;
}

.total {
  float: right;
}

.actions {
  margin-top: 20px;
  line-height: 32px;
}

.pay_action {
  display: inline-block;
  width: 180px;
  margin: 0 20px 10px 20px;
}

.pay_price {
  color: red;
  font-size: 32px;
  font-weight: bold;
}
</style>
